<template>
  <div class="axios">
    <van-tabs v-model:active="data.active">
      <van-tab
        v-for="(item, index) in data.fl_title"
        :title="item.catName"
        :key="index"
      >
        内容 {{ index }}
      </van-tab>
    </van-tabs>

    <div class="btn" @click="more_btn">
      <div><van-icon name="more" /></div>
    </div>

    <van-popup
      v-model:show="data.showTop"
      closeable
      position="top"
      :style="{ height: '40%' }"
    >
      <div class="volume-wrapper" style="margin-top: 50px">
        <div
          class="volume-item"
          v-for="(item, index) in data.fl_title"
          :key="index"
        >
          <div
            :class="data.active == index ? 'check_item' : 'item_box'"
            @click="go_wz_title(index)"
          >
            {{ item.catName }}
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive } from "vue";
import axios from "axios";
import { getArticleCatAll } from "../../http/article";
const data = reactive({
  active: "",
  showTop: false,
  fl_title: [],
});

const more_btn = () => {
  data.showTop = !data.showTop;
};
const go_wz_title = (index) => {
  console.log(index);

  data.showTop = !data.showTop;
  data.active = index;
};

const getListData = () => {
  getArticleCatAll()
    .then((res) => {
    //   console.log(res);
      console.log(res.data.articleCats);
    data.fl_title = res.data.articleCats;
    })
    .catch((err) => {
      console.log(err);
    });
  // axios.get("").then((res)=>{
  //     console.log(res);

  // })
};

onMounted(() => {
  getListData();
});
</script>

<style scoped>
.axios {
}

.box {
  display: flex;
}
.left {
}
.btn {
  position: absolute;
  top: 12px;
  right: 0;
}

.volume-wrapper {
  display: flex; /* flex布局 */

  /* justify-content: flex-start;  */
  /* 左对齐 */

  flex-wrap: wrap; /* 换行 */
}

.volume-item {
  /* margin-right: 20px;  */
  /* 每个元素右间距设置为20px */

  /* 计算每个元素的宽度：20px是前三个元素的间距（margin-right）和，除以4即为每个元素的宽度 */

  /* width: calc((100% - 20px) / 4); */
  /* width: calc((100% - 20px) / 3); */
}

/* 将下标是4的倍数元素的margin-right设置为0，即将每行最后一个元素的margin-right置0 */

.volume-item:nth-of-type(4n + 0) {
  margin-right: 0;
}

.item_box {
  width: 84px;
  height: 50px;
  margin: 5px 4px;
  background-color: #f5f5f6;
  font-size: 14px;
  line-height: 50px;
  background: rgba(85, 86, 102, 0.06);
  border-radius: 5px;
  text-align: center;
}

.check_item {
}
.check_item {
  width: 84px;
  height: 50px;
  margin: 5px 4px;
  line-height: 50px;
  background: red;
  border-radius: 5px;
  text-align: center;
  background-color: #e6e6e8;
  font-size: 14px;
}
</style>